<template>
  <div class="b-search flex items-center">
    <div class="editor" v-if="!route.path.includes('visual/preview')">
      <a-button @click="openVisible(guid)">编辑</a-button>
    </div>
    <a-form v-bind="option.form" layout="inline">
      <a-form-item
        :label-col-flex="option.form.autoLabelWidth ? 'auto' : option.form.labelWidth + 'px'"
        v-for="item in option.query"
        :label="item.label"
        :key="item.label"
        :show-colon="option.form.colon"
        :hideLabel="option.form.hideLabel"
      >
        <template #label>
          <span :style="`${option.form?.labelStyle};color:${option.form.labelFontColor}`">
            {{ item.label }}
          </span>
        </template>
        <template v-if="item.filter.type === 'input'">
          <a-input
            v-model="item.filter.filterCondition.value[0]"
            placeholder="请输入内容"
            allow-clear
            allow-search
            :style="`${option.form.style}`"
          />
        </template>
        <template v-else-if="item.filter.type === 'select'">
          <a-select
            v-if="item.filter.filterForm === '1'"
            v-model="item.filter.filterCondition.value[0]"
            placeholder="请输入内容"
            allow-clear
            allow-search
            :virtual-list-props="{ height: 200 }"
            :options="item.filter.enum.content"
            :default-input-value="item.filter.filterCondition.value"
            :style="`${option.form.style}`"
          />
          <a-select
            v-if="item.filter.filterForm === '2'"
            v-model="item.filter.filterCondition.value"
            placeholder="请输入内容"
            allow-clear
            allow-search
            :virtual-list-props="{ height: 200 }"
            :options="item.filter.enum.content"
            multiple
            :default-input-value="item.filter.filterCondition.value"
            :style="`${option.form.style}`"
          />
        </template>
        <template v-else-if="item.filter.type === 'date'">
          <template v-if="item.filter.date.type === 'day'">
            <template v-if="item.filter.filterType === '2'">
              <a-range-picker
                @change="(val) => dateChange(val, item.filter)"
                :default-value="dateValueChange(item.filter)"
                value-format="YYYY-MM-DD"
                format="YYYY-MM-DD"
                :style="`${option.form.style}`"
              />
            </template>
            <template v-else>
              <a-date-picker
                @change="(val) => dateChange(val, item.filter)"
                :default-value="dateValueChange(item.filter)"
                value-format="YYYY-MM-DD"
                format="YYYY-MM-DD"
                :style="`${option.form.style}`"
              />
            </template>
          </template>
          <template v-if="item.filter.date.type === 'month'">
            <template v-if="item.filter.filterType === '2'">
              <a-range-picker
                @change="(val) => dateChange(val, item.filter)"
                :default-value="dateValueChange(item.filter)"
                mode="month"
                value-format="YYYY-MM"
                format="YYYY-MM"
                :style="`${option.form.style}`"
              />
            </template>
            <template v-else>
              <a-month-picker
                @change="(val) => dateChange(val, item.filter)"
                :default-value="dateValueChange(item.filter)"
                value-format="YYYY-MM"
                format="YYYY-MM"
                :style="`${option.form.style}`"
              />
            </template>
          </template>
        </template>
      </a-form-item>
      <a-form-item>
        <a-space size="mini">
          <a-button @click="search" v-if="option.searchBtn.show" :size="option.form.size">
            <span v-if="option.searchBtn.icon" :class="option.searchBtn.icon" class="mr-1" />{{ option.searchBtn.text }}
          </a-button>
          <a-button v-if="option.resetBtn.show" :size="option.form.size">
            <span v-if="option.searchBtn.icon" :class="option.resetBtn.icon" class="mr-1" />{{ option.resetBtn.text }}
          </a-button>
        </a-space>
      </a-form-item>
    </a-form>
  </div>
  <a-modal
    :visible="visible[guid]"
    title="查询条件设置"
    width="80%"
    draggable
    @ok="visible[guid] = false"
    @cancel="visible[guid] = false"
  >
    <Editor v-model="option.query" />
  </a-modal>
</template>
<script setup>
import { visible, openVisible } from "@/hooks/useUtil.js"
const guid = ref(g.guid(7))
import { componentList, useVisual } from "@/hooks/userEditor"
import Editor from "./editor.vue"
import { useComponent } from "@/hooks/userEditor.js"
import dayjs from "@/utils/day.js"
import { useRoute } from "vue-router"
const { previewData } = useComponent()
const { commonStyle } = useVisual()
const attrs = useAttrs()
const option = attrs.option
const init = async () => {
  await nextTick()
}
const route = useRoute()
watch([option, commonStyle], () => {
  init()
})
init()

const search = () => {
  const query = {}
  const componentListMap = g.Copy(g.toHash(componentList.value, "key"))
  option.query.forEach((item) => {
    Object.keys(item.component).forEach((key) => {
      if (item.component[key].checked) {
        query[key] = item
        componentListMap[key].data.query = []
      }
    })
  })
  Object.keys(query).forEach((key) => {
    // option.query.forEach((item) => {
    //   const data = g.Copy(item)
    //   delete data.component
    //   componentListMap[key].data.query.push({ ...item.component[key].fieldQuery, ...data })
    // })
    previewData(componentListMap[key])
  })
  // previewData(componentListMap[key])
}
const dateChange = (date, filter) => {
  filter.filterCondition.value = filter.filterType === "1" ? [date, ""] : date
}
const dateValueChange = (filter) => {
  let date = ""
  if (filter.isDefault) {
    if (filter.filterType === "1") {
      date = dayjs.operateDay(
        filter.date.startDate.dateValue,
        filter.date.startDate.dateRelative,
        filter.date.startDate.dateType
      )
    }
    if (filter.filterType === "2") {
      date = [
        dayjs.operateDay(
          filter.date.startDate.dateValue,
          filter.date.startDate.dateRelative,
          filter.date.startDate.dateType
        ),
        dayjs.operateDay(filter.date.endDate.dateValue, filter.date.endDate.dateRelative, filter.date.endDate.dateType)
      ]
    }
    filter.filterCondition.value = filter.filterType === "1" ? [date, ""] : date
    return date
  } else {
    filter.filterCondition.value = []
  }

  // return dayjs.operateDay(
  //   filter.date.startDate.dateValue,
  //   filter.date.startDate.dateRelative,
  //   filter.date.startDate.dateType
  // )
}
</script>
<style scoped lang="less">
.b-search {
  width: 100%;
  height: 100%;
  .editor {
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 4;
    display: none;
  }
  &:hover {
    .editor {
      display: block;
    }
  }
}
</style>
